<template>
 <div class="border-1 border-r">
    <div class="flex-s-around  font-25 font-f-ib fontW-7 color-f bd-b-1 h-40">
      <div class="text-l font-25 font-f-ib fontW-7 flex-1_5">
        <div style="margin: 0 20%;">{{$t('shekvesOff.worls')}}</div>
      </div>
      <div class="text-c font-25 font-f-ib fontW-7 flex-1">{{$t('shekvesOff.floorPrice')}}</div>
      <div class="text-c font-25 font-f-ib fontW-7 flex-1">{{$t('shekvesOff.from')}}</div>
      <div class="text-c font-25 font-f-ib fontW-7 flex-1">{{$t('shekvesOff.to')}}</div>
      <div class="text-c font-25 font-f-ib fontW-7 flex-1">{{$t('shekvesOff.collection')}}</div>
    </div>
    <div class="item color-f font-20 h-3 mgtb-10 flex" v-for="item in shelvesData" :key="item.id">
      <div class="flex-1_5">
        <div style="margin: 0 5%;" class="flex">
          <div class="mgr-20">
            <el-checkbox v-model="item.ischecked" @change="isChange(item.id)"></el-checkbox>
            <img :src="item.img_url" alt="" class="mar-10"> </div>
          <div>
          <p class="fontW-7 font-22 theme-color font-f-ib ">{{item.authName}}#{{item.authNameId}}</p>
          <p class="fontW-7 font-16 font-f-ib ">{{item.authName}}#{{item.authNameId}}</p>
         </div>
          </div>
      </div>
      <div class="flex-1 fontW-7 font-16 font-f-ib text-c flex-n-center ">{{item.floorPrice}}</div>
      <div class="text-c fontW-7 font-16 font-f-ib flex-1 flex-n-center ">{{item.from}}</div>
      <div class="text-c fontW-7 font-16 font-f-ib flex-1 flex-n-center ">{{item.to}}</div>
      <!-- <div class="flex-1" :class="{'color-04f0':Number(item.num)==1,'color-ff00':Number(item.num)==2}">{{item.percent}}</div> -->
      <div class="flex-1 flex-n-center collection">
        <div class="flex coll_right bg-f border-r border-2-7de">
          <img src="../../assets/ETH/ETH.svg" alt="" style="width:20%">
          <el-input v-model="tableInp" placeholder="0.0"></el-input>
        </div>
        <el-button type="primary" class="mlr-20 bg-theme border-n">{{$t('btn.shelves')}}</el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ['shelvesData', 'checkedAll'],
  data () {
    return {
      tableInp: ''
    }
  },
  mounted () {
  },
  methods: {
    isChange: function (id) {
      console.log(this.shelvesData[id].ischecked)
      // let checkedO = this.shelvesData[id].ischecked
      // // this.shelvesData.forEach(item => {
      // //   if (item.ischecked === checkedO) {
      // //     console.log(item)
      // //   }
      // // })
      // let a = this.shelvesData.every(item => {
      //   if (item.ischecked === checkedO) {
      //     return checkedO
      //   }
      // })
      // console.log(a, '1111')
    }
  }
}
</script>
<style lang="less" scoped>
.item{
  .collection{
    .coll_right{
      /deep/.el-input__inner{
        background: none;
        border:none;
        text-align: right;
      }
    }
    /deep/.el-button--primary:focus, .el-button--primary:hover{
      background: #7de9ff;
    }
  }
}
</style>
